<template>
  <div class="questions-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="tip clearfix">
          <el-alert
            title="说明：目前支持学科和关键字条件筛选"
            type="warning"
            show-icon
            :closable="false"
            class="information"
          >
          </el-alert>
          <el-button style="float: right" type="success" @click="addQuestion"
            ><i class="el-icon-edit"></i> 新增试题</el-button
          >
        </div>
        <el-form ref="Qfilter" :model="Qfilter" label-width="70px" size="small">
          <el-row :gutter="10" type="flex">
            <el-col :span="6">
              <!-- 选择学科 -->
              <el-form-item label="学科" prop="subjectID">
                <el-select v-model="Qfilter.subjectID" placeholder="请选择学科">
                  <el-option
                    v-for="item in subjects"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录" prop="catalogID">
                <el-select v-model="Qfilter.catalogID" placeholder="请选择目录">
                  <el-option
                    v-for="item in catalogs"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="标签" prop="tags">
                <el-select v-model="Qfilter.tags" placeholder="请选择标签">
                  <el-option
                    v-for="item in tags"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option></el-select></el-form-item
            ></el-col>
            <el-col :span="6"
              ><el-form-item label="关键字" prop="keyword">
                <el-input
                  v-model="Qfilter.keyword"
                  placeholder="根据关键字搜索"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10" type="flex">
            <el-col :span="6">
              <el-form-item label="试题类型" prop="questionType">
                <el-select
                  v-model="Qfilter.questionType"
                  placeholder="请选择试题类型"
                >
                  <el-option label="单选" value="1"></el-option>
                  <el-option label="多选" value="2"></el-option>
                  <el-option label="简答" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度" prop="difficulty">
                <el-select
                  v-model="Qfilter.difficulty"
                  placeholder="请选择难度"
                >
                  <el-option label="简单" value="1"></el-option>
                  <el-option label="一般" value="2"></el-option>
                  <el-option label="困难" value="3"></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="方向" prop="direction">
                <el-select v-model="Qfilter.direction" placeholder="请选择方向">
                  <el-option
                    v-for="item in directions"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="录入者" prop="creatorID">
                <el-select
                  v-model="Qfilter.creatorID"
                  placeholder="请选择录入者"
                >
                  <el-option
                    v-for="item in users"
                    :key="item.id"
                    :label="item.username"
                    :value="item.id"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
          </el-row>
          <el-row :gutter="10" type="flex">
            <el-col :span="6"
              ><el-form-item label="题目备注" prop="remarks">
                <el-input
                  v-model="Qfilter.remarks"
                  placeholder="请输入题目备注"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6"
              ><el-form-item label="企业简称" prop="shortName">
                <el-input
                  v-model="Qfilter.shortName"
                  placeholder="请输入企业简称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6"
              ><el-form-item label="城市" prop="province">
                <el-select
                  v-model="Qfilter.province"
                  placeholder="市"
                  class="province"
                >
                  <el-option
                    v-for="item in provinces"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
                <el-select v-model="Qfilter.city" placeholder="区" class="city">
                  <el-option
                    v-for="item in cities"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6"
              ><el-form-item style="text-align: right">
                <el-button size="small" @click="resetForm">清除</el-button>
                <el-button type="primary" size="small" @click="getQuestions"
                  >搜索</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-alert
          :title="`数据一共 ${total} 条`"
          type="info"
          close-text="隐藏"
          center
          show-icon
        >
        </el-alert>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="number"
          label="试题编号"
          width="120px"
        ></el-table-column>
        <el-table-column prop="subject" label="学科"></el-table-column>
        <el-table-column prop="catalog" label="目录"></el-table-column>
        <el-table-column label="题型">
          <template v-slot="{ row }">
            <span v-if="row.questionType === '1'">单选</span>
            <span v-else-if="row.questionType === '2'">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column label="题干" width="280px">
          <template v-slot="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="180px">
          <template v-slot="{ row }">
            {{ row.addDate | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="难度">
          <template v-slot="{ row }">
            <span v-if="row.difficulty === '1'">简单</span>
            <span v-else-if="row.difficulty === '2'">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="creator"
          label="录入者"
          width="100px"
        ></el-table-column>
        <el-table-column label="操作" width="180px">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              plain
              icon="el-icon-view"
              circle
              size="small"
              @click="getDetails(row)"
            ></el-button>
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              circle
              size="small"
              @click="editQuestion(row.id)"
            ></el-button>
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              circle
              size="small"
              @click="delQuestion(row)"
            ></el-button>
            <el-button
              type="warning"
              plain
              icon="el-icon-check"
              circle
              size="small"
              @click="addToSpecial(row.id)"
            ></el-button>
          </template>
        </el-table-column>
        <preview-dialog
          :details="details"
          :dialogVisible.sync="dialogVisible"
        ></preview-dialog>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        background
        layout="prev, pager, next,sizes,jumper"
        :total="total"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="5"
        @current-change="handleCurrentChange"
        :current-page="page"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { list, detail, remove, choiceAdd } from '@/api/hmmm/questions'
import { simple } from '@/api/hmmm/subjects'
import { simple as users } from '@/api/base/users'
import { simple as catalog } from '@/api/hmmm/directorys'
import { simple as tags } from '@/api/hmmm/tags'
import { provinces, citys } from '@/api/hmmm/citys'
import PreviewDialog from '@/module-hmmm/components/questions-preview.vue'
import { direction } from '@/api/hmmm/constants'
export default {
  components: {
    PreviewDialog
  },
  data () {
    return {
      tableData: [],
      details: [{ question: '', questionType: '', options: [], videoURL: '', answerID: '' }],
      Qfilter: {
        subjectID: '',
        catalogID: '',
        tags: '',
        keyword: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: '',
        province: '',
        city: ''
      },
      total: null,
      page: 1,
      pagesize: 5,
      subjects: [],
      catalogs: [],
      tags: [],
      users: [],
      provinces: [],
      cities: [],
      directions: direction,
      dialogVisible: false,
      explanation: true
    }
  },
  created () {
    this.getQuestions()
    this.getSubjects()
    this.getUsers()
  },
  methods: {
    async getQuestions () {
      try {
        const { subjectID, keyword } = this.Qfilter
        const params = {
          page: this.page,
          pagesize: this.pagesize,
          subjectID: subjectID || null,
          keyword: keyword || null
        }
        const data = await list(params)
        if (data.status !== 200) {
          return this.$message({
            type: 'error',
            message: '获取题库失败!'
          })
        }
        const { data: res } = data
        this.tableData = res.items
        this.total = res.counts
        this.provinces = provinces()
        // console.log(data)
      } catch (error) {
        console.log(error)
      }
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.getQuestions()
    },
    handleCurrentChange (val) {
      this.page = val
      this.getQuestions()
    },
    async getSubjects () {
      try {
        const { data } = await simple()
        this.subjects = data
        // console.log(data)
      } catch (error) {
        console.log(error)
      }
    },
    async getUsers () {
      const { data } = await users()
      // console.log(data)
      this.users = data
    },
    resetForm () {
      this.$refs.Qfilter.resetFields()
      // this.$refs[formName].resetFields();
    },
    async getDetails (id) {
      this.dialogVisible = true
      const { data } = await detail(id)
      this.details = [data]
      // console.log(this.details)
    },
    video () {
      if (this.details[0].videoURL) this.showVideo = true
      else this.showVideo = false
    },
    addQuestion () {
      this.$router.push('new')
    },
    editQuestion (id) {
      this.$router.push(`new?id=${id}`)
    },
    delQuestion (row) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await remove(row)
          this.getQuestions()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } catch (error) {
          this.$message({
            type: 'error',
            message: '删除失败!'
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async addToSpecial (id) {
      // await choiceAdd
      const data = {
        id,
        choiceState: 1
      }
      this.$confirm('确定加入精选题库?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        try {
          await choiceAdd(data)
          // this.getQuestions()
          this.$message({
            type: 'success',
            message: '加入成功!'
          })
          this.$router.push('choice')
        } catch (error) {
          this.$message({
            type: 'error',
            message: '加入失败!'
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }
  },
  watch: {
    async 'Qfilter.subjectID' (newVal) {
      this.Qfilter.catalogID = ''
      this.Qfilter.tags = ''
      const params = {
        subjectID: newVal
      }
      const { data } = await catalog(params)
      this.catalogs = data
      const { data: tagList } = await tags(params)
      this.tags = tagList
    },
    'Qfilter.province' (newVal) {
      this.Qfilter.city = ''
      this.cities = citys(newVal)
    }
  }
}
</script>

<style scoped lang='less'>
.el-select--small {
  width: 100%;
}
.province {
  width: 48%;
  margin-right: 2%;
}
.city {
  width: 48%;
  margin-left: 2%;
}
.questions-container {
  padding: 20px;
}
.el-form {
  margin-top: 20px;
}
.el-row {
  // margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.el-pagination {
  margin: 10px 0;
  float: right;
}
/deep/ .el-pagination__jump {
  margin-left: 0;
}
/deep/ .el-card__header {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.information {
  width: 300px;
  margin-right: 0 !important;
  float: left;
}

// .question {
//   color: #589ff8;
//   font-size: 16px;
//   font-weight: bold;
// }

// .bottom {
//   margin-bottom: 20px;
// }
// .top {
//   border-top: 1px solid #ebeef5;
// }
// .video {
//   width: 400px;
// }
// .video video {
//   width: 100%;
// }
</style>
